.dots {
  @apply w-fit inline-flex items-center justify-center;
  height: 0.5em;

  .dotItem {
    @apply bg-theme;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    animation: fade 0.8s ease-in-out alternate infinite;

    &:not(:first-child) {
      margin-left: 0.375rem;
    }

    &:nth-of-type(1) {
      animation-delay: -0.4s;
    }

    &:nth-of-type(2) {
      animation-delay: -0.2s;
    }
  }
}

@keyframes fade {
  from {
    @apply opacity-100;
  }

  to {
    @apply opacity-0;
  }
}
